<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/vue.js"></script>

</head>
<body>

<div id="fwxxdiv">
    <h1>  {{name}}  </h1>
    <input type="text" v-model="name">
    <button @click="show()">修改</button>
<!-- c:foreach  items =qxs  var=p   v-model="qxid" qxid属性与下拉框 绑定-->
        <select name="qxid" id="qxid" v-model="qxid" @change="getjds()">
            <option v-for="p in qxs" :value="p.qxid">{{p.qx}}</option>
        </select>

        <select name="jdid" id="jdid">
            <option v-for="j in jds" value="">{{j.jd}}</option>
        </select>
</div>

</body>
<script>
  //理解他,java类的方式   相当于建立一个类 类名叫app
    var app=new Vue({
        //设置管理区域
        el:"#fwxxdiv",
        //属性区:
        data:{
            name:'周杰伦',
            qxid:'',
            qxs:[] //定义一个集合
            ,
            jds:[]
        },
        //方法区:
        methods:{
            getjds( ){
                $.getJSON("/queruByqxid/"+this.qxid,function(json){
                    app.jds=json; //把集合赋予属性 qxs

                }) ;
            },
            show(){
                this.name="刘德华";
            }
        },
        //页面加载事件
        created(){
            $.getJSON("/queryQxs",function(json){
                 app.qxs=json; //把集合赋予属性 qxs

            }) ;
        }
    });

    //页面加载事件



</script>
</html>





